<template>
	<div class="main">
		<div class="container">
			<!-- content here -->
			<div class="module">
				<h3 style="display: flex;">订单详情<span class="first">订单编号:{{order.oid}}</span></h3>
				<table class="table">
					<thead>
						<tr>
							<th>商品信息</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(p) in pro" :key="p.pid">
							<td>
								<img class="cart-goods-img" :src="p.cover">
								<span>{{p.title}}</span>
							</td>
							<td>￥{{p.price}}</td>
							<td>{{p.quantity}}</td>
							<td>￥{{p.price * p.quantity}}</td>
						</tr>
					</tbody>
				</table>
				<div class="module-bottom">
					<div class="autofill">
						<div class="color2">
							共
							<span class="big">{{pro.length}}</span>
							件商品
						</div>
					</div>
					<div class="autofill">
						<div>应付总额：<span class="color1 big">￥{{order.totalAmount}}</span></div>
						<div class="color2">应付总额不含运费</div>
					</div>
					<div class="autofill">
						<button class="btn-blue" @click="pay">立即付款</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				order: [],
				pro:[]
			}
		},
		created() {
			this.order =this.$route.params.order
			var user = JSON.parse(sessionStorage.getItem('newuser'))
			this.axios.get('/order/find', {
				params: {
					oid: this.order.oid
				}
			}).then(response => {
				let res = response.data.data
				this.pro=res
			})
		},
		methods: {
			pay(){
				window.location="http://localhost:8082"+"/order/hander?oid="+this.order.oid
			}
		}
	}
</script>

<style scoped="scoped">
	.first{
		display: block;
	}
	
	
	.table {
		width: 100%;
		background-color: #FFFFFF;
		/* 合并相邻单元格的边框,由于这个是表格的整体行为,所以写在表格样式中,不要写在td/th样式中 */
		border-collapse: collapse;
	}

	.table .cart-goods-img {
		width: 80px;
		height: 80px;
		vertical-align: middle;
	}

	.table th,
	.table td {
		text-align: left;
		padding: 15px;
	}

	.table th {
		border-bottom: 1px solid #CCCCCC;
	}

	.module-bottom {
		display: flex;
		align-items: center;
		background-color: #FBFBFB;
		padding: 15px;
		border-top: 1px solid #CCCCCC;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.module-bottom .autofill {
		flex-grow: 1;
		text-align: right;
	}
</style>
